<template>
  <div class="btn-model">
    <el-button size="mini" type="primary" @click="dialogVisible = true">编辑</el-button>

    <el-dialog
      title="管理权限设置"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      :modal-append-to-body="false">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户角色：" prop="position">
          <slot name="slot_position">slot_position</slot>
        </el-form-item>
        <el-form-item label="是否停用：" prop="isEmploy">
          <el-switch v-model="ruleForm.isEmploy"></el-switch>
        </el-form-item>
        <el-form-item label="权限分配：" prop="authoritySetting">
          <el-checkbox-group v-model="ruleForm.authoritySetting">
            <el-checkbox label="分类管理" name="authoritySetting"></el-checkbox>
            <el-checkbox label="组合管理" name="authoritySetting"></el-checkbox>
            <el-checkbox label="交易管理" name="authoritySetting"></el-checkbox>
            <el-checkbox label="用户管理" name="authoritySetting"></el-checkbox>
            <el-checkbox label="设计师管理" name="authoritySetting"></el-checkbox>
            <el-checkbox label="管理员管理" name="authoritySetting"></el-checkbox>
            <el-checkbox label="登录日志" name="authoritySetting"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="权限说明：" prop="explain">
          <el-input type="textarea" v-model="ruleForm.explain"></el-input>
        </el-form-item>
        <!--        <el-form-item>-->
        <!--          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>-->
        <!--          <el-button @click="resetForm('ruleForm')">重置</el-button>-->
        <!--        </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "authorityModel",

    props: {
      adminData: {}
    },

    data() {
      return {
        dialogVisible: false,

        //设置表单输入值接受变量
        ruleForm: {
          isEmploy: this.adminData.employee_level,
          authoritySetting: [],
          explain: this.adminData.employee_describe,
        },

        //表单输入规制
        rules: {
          authoritySetting: [
            {type: 'array', required: true, message: '请至少选择一个管理权限', trigger: 'change'}
          ],
          explain: [
            {required: true, message: '请填写权限说明', trigger: 'blur'},
            {min: 0, max: 40, message: ' 最多40个字符', trigger: 'blur'}
          ],
        }
      };
    },

    methods: {
      //模态框确认关闭按钮
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      //表单主键提交按钮
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //   //表单主键重置按钮
      //   resetForm(formName) {
      //     this.$refs[formName].resetFields();
      //   }
    },

    // created() {
    //   console.log(this.adminData)
    // }
  };
</script>

<style scoped>
  .btn-model {
    display: inline-block;
    text-align: left;
  }
</style>
